﻿@model dynamic

@{
    Layout = null;
}
 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">


    <link href="/Content/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
                body {
                    padding-bottom: 40px;
                    color: #5a5a5a;
                }


                .navbar-wrapper {
                    position: absolute;
                    top: 0;
                    right: 0;
                    left: 0;
                    z-index: 20;
                }

                    /* Flip around the padding for proper display in narrow viewports */
                    .navbar-wrapper > .container {
                        padding-right: 0;
                        padding-left: 0;
                    }

                    .navbar-wrapper .navbar {
                        padding-right: 15px;
                        padding-left: 15px;
                    }

                        .navbar-wrapper .navbar .container {
                            width: auto;
                        }



                .carousel {
                    height: 500px;
                    margin-bottom: 60px;
                }

                .carousel-caption {
                    z-index: 10;
                }


                .carousel .item {
                    height: 500px;
                    background-color: #777;
                }

                .carousel-inner > .item > img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    min-width: 100%;
                    height: 500px;
                }


                .marketing .col-lg-4 {
                    margin-bottom: 20px;
                    text-align: center;
                }

                .marketing h2 {
                    font-weight: normal;
                }

                .marketing .col-lg-4 p {
                    margin-right: 10px;
                    margin-left: 10px;
                }


                /* Featurettes
        ------------------------- */

                .featurette-divider {
                    margin: 80px 0; /* Space out the Bootstrap <hr> more */
                }

                /* Thin out the marketing headings */
                .featurette-heading {
                    font-weight: 300;
                    line-height: 1;
                    letter-spacing: -1px;
                }


                @@media (min-width: 768px) {
                    /* Navbar positioning foo */
                    .navbar-wrapper {
                        margin-top: 20px;
                    }

                        .navbar-wrapper .container {
                            padding-right: 15px;
                            padding-left: 15px;
                        }

                        .navbar-wrapper .navbar {
                            padding-right: 0;
                            padding-left: 0;
                        }

                        /* The navbar becomes detached from the top, so we round the corners */
                        .navbar-wrapper .navbar {
                            border-radius: 4px;
                        }

                    /* Bump up size of carousel content */
                    .carousel-caption p {
                        margin-bottom: 20px;
                        font-size: 21px;
                        line-height: 1.4;
                    }

                    .featurette-heading {
                        font-size: 50px;
                    }
                }

                @@media (min-width: 992px) {
                    .featurette-heading {
                        margin-top: 120px;
                    }
                }
    </style>
    <script type = 'text/javascript' >
        var appInsights=window.appInsights||function(config)
        {
            function r(config){ t[config] = function(){ var i = arguments; t.queue.push(function(){ t[config].apply(t, i)})} }
            var t = { config:config},u=document,e=window,o='script',s=u.createElement(o),i,f;for(s.src=config.url||'//az416426.vo.msecnd.net/scripts/a/ai.0.js',u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=['Event','Exception','Metric','PageView','Trace','Ajax'];i.length;)r('track'+i.pop());return r('setAuthenticatedUserContext'),r('clearAuthenticatedUserContext'),config.disableExceptionTracking||(i='onerror',r('_'+i),f=e[i],e[i]=function(config, r, u, e, o) { var s = f && f(config, r, u, e, o); return s !== !0 && t['_' + i](config, r, u, e, o),s}),t
        }({
            instrumentationKey:'9403032c-2bcd-41d4-ac21-1535ad810164'
        });
        
        window.appInsights=appInsights;
        appInsights.trackPageView();
    </script>
</head>
<!-- NAVBAR
================================================== -->
<body>
    <div class="navbar-wrapper">
        <div class="container">

            <nav class="navbar navbar-inverse navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">电商高并发解决方案Demo</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#about">关于我们</a></li>
                            <li><a href="#contact">联系方式</a></li>

                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">请登录</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">操作 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">登陆</a></li>
                                    <li><a href="#">注销</a></li>
                                    <li><a href="#">我的订单</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

        </div>
    </div>


    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="first-slide" src="/Content/Images/B1.jpeg" alt="First slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>电商高并发解决方案Demo</h1>
                        <p style="text-align: left">本演示系统主要是为了演示电商系统处理高并发订单的解决方案而编写的一个技术Demo，通过该Demo展示如何在高并发订单应用场景下完成下单、结算、付款、库存扣减业务。</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">开始使用</a></p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img class="second-slide" src="/Content/Images/B2.jpg" alt="Second slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>采用技术简介</h1>
                        <p style="text-align: left">本Demo系统采用异步消息队列排队机制来解决高并发问题，首先客户端使用异步技术提交订单到消息队列，服务器后端开启定时服务处理队列中的订单，客户端在下单操作完成以后马上开启侦听机制（AJAX轮询或者SignalR）查询订单处理结果,发现订单生成则下单操作成功，超时要求重试。服务器后端处理完毕以后会立刻通知客户端。</p>
                        <p style="text-align: left">系统采用以下技术:</p>
                        <ol style="text-align: left">
                            <li>客户端异步</li>
                            <li>消息队列RabbitMQ</li>
                            <li>SignalR</li>
                        </ol>
                        <p>
                            <a class="btn btn-lg btn-primary" href="#" role="button">了解更多</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img class="third-slide" src="/Content/Images/B3.jpg" alt="Third slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>演示系统简介</h1>
                        <p>本系统演示客户 用户密码 test1/123456 </p>
                        <p>本系统演示商户 用户密码 admin/admin </p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">开始使用</a></p>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- /.carousel -->
    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row">
            <div class="col-xs-6 col-md-3 thumbnail" style="height: 318px; margin: 20px; padding: 15px;">
                <img class="img-rounded" src="https://img11.360buyimg.com/n1/s300x300_jfs/t2773/81/3883922335/60107/344c3834/579eca00N10071b6f.jpg" alt="Generic placeholder image" width="120">
                <h2>华为荣耀盒子Pro</h2>
                <p>华为荣耀盒子Pro 旗舰高清网络机顶盒 电视盒子 4K 杜比+DTS 智能语音 跨屏续播 互补式双天线wifi + 网口</p>
                <p>
                    <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                    <a class="btn btn-primary" href="#" role="button">查看产品</a>
                </p>
            </div>    
            <div class="col-xs-6 col-md-3 thumbnail" style="height: 318px; margin: 20px; padding: 15px;">
                <img class="img-rounded" src="https://img14.360buyimg.com/n0/jfs/t3424/341/2276700314/233479/8f9fa182/584f5811Na8e4c54c.jpg" alt="Generic placeholder image" width="120">
                <h2>罗技 G402</h2>
                <p>罗技（Logitech）G系列电竞游戏鼠标宏编程有线发光笔记本台式电脑LOLCF守望先锋 G402 电竞鼠标（宏编程RGB版）</p>
                <p>
                    <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                    <a class="btn btn-primary" href="#" role="button">查看产品</a>
                </p>
            </div>  
            <div class="col-xs-6 col-md-3 thumbnail" style="height: 318px; margin: 20px; padding: 15px;">
                <img class="img-rounded" src="https://img12.360buyimg.com/n1/s450x450_jfs/t2215/82/842568566/70428/56eb3dfb/562dcaa6N51e15ea5.jpg" alt="Generic placeholder image" width="120">
                <h2>金士顿 32GB</h2>
                <p>金士顿（Kingston）32GB 80MB/s TF(Micro SD)Class10 UHS-I高速存储卡</p>
                <p>
                    <a class="btn btn-primary" href="#" role="button">加入购物车</a>
                    <a class="btn btn-primary" href="#" role="button">查看产品</a>
                </p>
            </div>
        </div><!-- /.row -->
        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider">

        <div class="row featurette">
            <div class="col-md-7">
                <h2 class="featurette-heading">系统简介</h2>
                <p class="lead">本演示系统主要是为了演示电商系统处理高并发订单的解决方案而编写的一个技术Demo，通过该Demo展示如何在高并发订单应用场景下完成下单、结算、付款、库存扣减业务。</p>
            </div>
            <div class="col-md-5">
                <img class="featurette-image img-responsive center-block" width="256" src="https://cdn1.iconfinder.com/data/icons/ampola-final-by-ampeross/256/control_panel.png" alt="Generic placeholder image">
            </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
            <div class="col-md-7 col-md-push-5">
                <h2 class="featurette-heading">技术特点</h2>
                <p class="lead">本Demo系统采用异步消息队列排队机制来解决高并发问题，首先客户端使用异步技术提交订单到消息队列，服务器后端开启定时服务处理队列中的订单，客户端在下单操作完成以后马上开启侦听机制（AJAX轮询或者SignalR）查询订单处理结果,发现订单生成则下单操作成功，超时要求重试。服务器后端处理完毕以后会立刻通知客户端。</p>
            </div>
            <div class="col-md-5 col-md-pull-7">
                <img class="featurette-image img-responsive center-block" width="256" src="https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/preferences-desktop-assistive-technology-512.png" alt="Generic placeholder image">
            </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
            <div class="col-md-7">
                <h2 class="featurette-heading">使用指南</h2>
                <p class="lead">系统使用帐号：</p>
                <p>演示客户 用户密码 test1/123456 </p>
                <p>演示商户 用户密码 admin/admin </p>
            </div>
            <div class="col-md-5">
                <img class="featurette-image img-responsive center-block" width="256" src="https://cdn3.iconfinder.com/data/icons/beos/BeOS_Help_book.png" alt="Generic placeholder image">
            </div>
        </div>

        <hr class="featurette-divider">

        <!-- /END THE FEATURETTES -->
        <!-- FOOTER -->
        <footer>
            <p class="pull-right"><a href="#">回到顶部</a></p>
            <p>&copy; 2016 Xwork工作室&middot; </p>
        </footer>
    </div><!-- /.container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>

</body>
</html>
